<!--
/**
* @description 方案启动
* @author wind-lc
* @date 2020-05-14
*/
-->
<template>
  <div class="page">
    <form-loading :formLoadingVisible="!pageReady"></form-loading>
    <!-- 步骤条 -->
    <a-steps :current="current"
             size="small"
             class="scheme-start-step-container">
      <a-step v-for="(item,index) in step"
              :key="index"
              :title="item.title">
        <a-icon slot="icon"
                :type="item.icon" />
      </a-step>
    </a-steps>
    <!-- 步骤条 -->
    <div class="scheme-start-form">
      <!-- 选择方案 -->
      <a-form-model :model="selectSchemeForm"
                    :rules="selectSchemeRules"
                    ref="selectSchemeForm"
                    v-if="current === 0"
                    :label-col="col.selectSchemeForm.labelCol"
                    :wrapper-col="col.selectSchemeForm.wrapperCol">
        <a-row :gutter="16">
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="方案名称"
                               prop="name">
              <a-input v-model="selectSchemeForm.name"
                       :maxLength="100"
                       placeholder="请输入方案名称">
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="应急类型"
                               prop="emergencyType">
              <a-select v-model="selectSchemeForm.emergencyType"
                        placeholder="请选择应急类型">
                <a-select-option v-for="(item,index) in emergencyTypeList"
                                 :key="index"
                                 :value="item.value">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="起止时间"
                               prop="fromTo">
              <a-range-picker class="input-width"
                              v-model="selectSchemeForm.fromTo"></a-range-picker>
            </a-form-model-item>
          </a-col>
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="响应类型"
                               prop="responseType">
              <a-select v-model="selectSchemeForm.responseType"
                        placeholder="选择响应类型">
                <a-select-option v-for="(item,index) in responseTypeList"
                                 :key="index"
                                 :value="item.value">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="响应时间"
                               prop="responseTime">
              <a-range-picker class="input-width"
                              :show-time="{ format: 'HH:mm' }"
                              format="YYYY-MM-DD HH:mm"
                              v-model="selectSchemeForm.responseTime"></a-range-picker>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :md="24"
                 :lg="24"
                 :xl="24"
                 :xxl="24">
            <a-form-model-item label="方案说明"
                               :label-col="{ span: 4}"
                               :wrapper-col="{ span: 17 }"
                               prop="explain">
              <a-input type='textarea'
                       :autoSize="{minRows: 10,maxRows: 10}"
                       v-model="selectSchemeForm.explain"
                       :maxLength="5000"
                       placeholder="请输入方案说明">
              </a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :md="24"
                 :lg="24"
                 :xl="24"
                 :xxl="24">
            <a-form-model-item label="方案附件"
                               :label-col="{ span: 4}"
                               :wrapper-col="{ span: 17 }"
                               prop="fileList">
              <a-row :gutter="16"
                     v-if="pageReady">
                <a-col :md="24"
                       :lg="24"
                       :xl="24"
                       :xxl="24">
                  <a-upload v-if="this.$route.params.mode === 'edit'"
                            accept=".xlsx,.xls,.doc,.docx,.pdf,.jpg,.jpeg,.png"
                            :defaultFileList="defaultFileList"
                            :beforeUpload="beforeUpload"
                            @change="uploadChange"
                            :customRequest="customRequest">
                    <a-button>
                      <a-icon type="upload" /> 选择文件 </a-button>
                  </a-upload>
                  <a-upload v-else
                            accept=".xlsx,.xls,.doc,.docx,.pdf,.jpg,.jpeg,.png"
                            :fileList="fileList"
                            :beforeUpload="beforeUpload"
                            @change="uploadChange"
                            :customRequest="customRequest">
                    <a-button>
                      <a-icon type="upload" /> 选择文件 </a-button>
                  </a-upload>
                </a-col>
              </a-row>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <!-- 选择方案 -->
      <!-- 选择规则 -->
      <a-form-model v-if="current === 1"
                    :model="enterpriseForm"
                    :rules="enterpriseFormRules"
                    ref="enterpriseForm"
                    :label-col="col.enterpriseForm.labelCol"
                    :wrapper-col="col.enterpriseForm.wrapperCol"
                    labelAlign="left">
        <a-row v-if="selectSchemeForm.emergencyType==='4'"
               :gutter="16">
          <a-col :md="24"
                 :lg="24"
                 :xl="24"
                 :xxl="24">
            <a-form-model-item label="选择规则"
                               prop="regular">
              <a-select v-model="enterpriseForm.regular"
                        placeholder="请选择规则"
                        @change="regularChange">
                <a-select-option v-for="(item,index) in regularList"
                                 :key="index"
                                 :value="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :md="24"
                 :lg="24"
                 :xl="24"
                 :xxl="24">
            <a-form-model-item label="所选企业"
                               prop="rightData">
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16"
               class="scheme-start-table-wrapper">
          <a-table :columns="leftColumns"
                   :dataSource="sourceData"
                   rowKey="id"
                   :rowSelection="{selectedRowKeys: leftSelectedRowKeys,onChange: leftSelectedRowChange,getCheckboxProps:isDisabled}"
                   bordered
                   :loading="leftTableLoading"
                   @change="leftTableChange"
                   :pagination="leftPagination">
          </a-table>
          <div class="scheme-start-table-arrow">
            <a-button type="primary"
                      :disabled="!leftIsSelecte"
                      icon="arrow-right"
                      @click="toTarget"></a-button>
            <a-button type="primary"
                      :disabled="!rightIsSelecte"
                      icon="arrow-left"
                      @click="toSource"></a-button>
          </div>
          <a-table :columns="rightColumns"
                   :dataSource="targetData"
                   rowKey="id"
                   :rowSelection="{selectedRowKeys: rightSelectedRowKeys,onChange: rightSelectedRowChange,getCheckboxProps:isDisabled}"
                   bordered
                   :loading="rightTableLoading"
                   @change="rightTableChange"
                   :pagination="rightPagination">
          </a-table>
        </a-row>
      </a-form-model>
      <!-- 选择规则 -->
      <!-- 方案启动 -->
      <a-form-model :model="selectSchemeForm"
                    ref="selectSchemeForm"
                    v-if="current === 2"
                    :label-col="col.selectSchemeForm.labelCol"
                    :wrapper-col="col.selectSchemeForm.wrapperCol">
        <a-row :gutter="16">
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="方案名称">
              <a-input v-model="selectSchemeForm.name"
                       disabled>
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="应急类型">
              <a-select v-model="selectSchemeForm.emergencyType"
                        disabled>
                <a-select-option v-for="(item,index) in emergencyTypeList"
                                 :key="index"
                                 :value="item.value">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="起止时间">
              <a-range-picker class="input-width"
                              disabled
                              v-model="selectSchemeForm.fromTo"></a-range-picker>
            </a-form-model-item>
          </a-col>
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="响应类型">
              <a-select v-model="selectSchemeForm.responseType"
                        disabled>
                <a-select-option v-for="(item,index) in responseTypeList"
                                 :key="index"
                                 :value="item.value">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="响应时间">
              <a-range-picker class="input-width"
                              disabled
                              v-model="selectSchemeForm.responseTime"></a-range-picker>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :md="24"
                 :lg="24"
                 :xl="24"
                 :xxl="24">
            <a-form-model-item label="方案说明"
                               :label-col="{ span: 4}"
                               :wrapper-col="{ span: 17 }">
              <a-input type='textarea'
                       :autoSize="{minRows: 10,maxRows: 10}"
                       v-model="selectSchemeForm.explain"
                       disabled>
              </a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :md="24"
                 :lg="24"
                 :xl="24"
                 :xxl="24">
            <a-form-model-item label="方案附件"
                               :label-col="{ span: 4}"
                               :wrapper-col="{ span: 17 }">
              <a-row :gutter="16">
                <a-col :md="24"
                       :lg="24"
                       :xl="24"
                       :xxl="24">
                  <a-upload v-if="this.$route.params.mode === 'edit'"
                            accept=".xlsx,.xls,.doc,.docx,.pdf,.jpg,.jpeg,.png"
                            :defaultFileList="defaultFileList"
                            :remove="remove">
                    <a-button disabled>
                      <a-icon type="upload" /> 选择文件 </a-button>
                  </a-upload>
                  <a-upload v-else
                            accept=".xlsx,.xls,.doc,.docx,.pdf,.jpg,.jpeg,.png"
                            :fileList="fileList"
                            :remove="remove">
                    <a-button disabled>
                      <a-icon type="upload" /> 选择文件 </a-button>
                  </a-upload>

                </a-col>
              </a-row>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row v-if="selectSchemeForm.emergencyType==='4'"
               :gutter="16">
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="选择规则">
              <a-select v-model="enterpriseForm.regular"
                        disabled>
                <a-select-option v-for="(item,index) in regularList"
                                 :key="index"
                                 :value="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :md="24"
                 :lg="24"
                 :xl="24"
                 :xxl="24">
            <a-form-model-item label="所选企业"
                               :label-col="{ span: 4}"
                               :wrapper-col="{ span: 17 }">
              <a-tag v-for="(item,index) in rightData"
                     :key="index">{{item.name}}</a-tag>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <!-- 方案启动 -->
    </div>
    <div class="scheme-start-step">
      <a-button type="primary"
                :disabled="current===0"
                @click="prev">上一步</a-button>
      <a-button type="primary"
                :disabled="nextDisabled"
                @click="next">{{current===2? '启动': '下一步'}}</a-button>
    </div>
  </div>
</template>
<script>
import { Steps, Icon, FormModel, Row, Col, Input, DatePicker, Select, Button, Table, Tag, Upload } from 'ant-design-vue'
import { regexConstants, validators } from '@/utils/validate'
import { fileUpload, queryHnRuleList, getEntinfoList, insertSelective, getHnPlanById, getChooseEntinfoList, updateByPrimaryKeySelective } from '@/request/api/emergencyControl/schemeStart'
import { getDictData } from '@/request/api/common'
export default {
  name: 'schemeStart',
  components: {
    ASteps: Steps,
    AStep: Steps.Step,
    AIcon: Icon,
    AFormModel: FormModel,
    AFormModelItem: FormModel.Item,
    AInput: Input,
    ARow: Row,
    ACol: Col,
    ARangePicker: DatePicker.RangePicker,
    ASelect: Select,
    ASelectOption: Select.Option,
    AButton: Button,
    ATable: Table,
    ATag: Tag,
    AUpload: Upload
  },
  data () {
    return {
      // 页面完成
      pageReady: false,
      // 数据字典
      dataDictionary: {},
      // 当前步骤
      current: 0,
      // 步骤标题
      step: [
        {
          title: '选择方案',
          icon: 'bars'
        },
        {
          title: '确认企业',
          icon: 'audit'
        },
        {
          title: '方案启动',
          icon: 'profile'
        }
      ],
      // 选择方案表单
      selectSchemeForm: {
        fileList: []
      },
      // 方案附件列表
      fileList: [],
      // 已上传文件
      defaultFileList: [],
      // 附件上传阻止下一步
      nextDisabled: false,
      // 表单布局
      col: {
        selectSchemeForm: {
          labelCol: { span: 8 },
          wrapperCol: { span: 10 }
        },
        enterpriseForm: {
          labelCol: { span: 2 },
          wrapperCol: { span: 8 }
        }
      },
      // 选择方案校验
      selectSchemeRules: {
        name: [
          { required: true, message: '请输入方案名称!', trigger: 'change' },
          {
            pattern: regexConstants.schemeName,
            validator: validators.validate,
            message: '请输入类似2020年《应急方案(第一批)》的名称',
            trigger: 'change'
          }
        ],
        fromTo: [
          { required: true, message: '请选择起止时间!', trigger: 'change' }
        ],
        emergencyType: {
          required: true, message: '请选择应急类型!', trigger: 'change'
        },
        responseType: {
          required: true, message: '请选择响应类型!', trigger: 'change'
        },
        responseTime: [
          { required: true, message: '请选择响应时间!', trigger: 'change' }
        ],
        explain: [
          { required: true, message: '请输入方案说明!', trigger: 'change' }
        ],
        fileList: [
          { required: true, message: '请选择方案文件!', trigger: 'change' }
        ]
      },
      // 应急类型列表
      emergencyTypeList: [],
      // 响应类型列表
      responseTypeList: [],
      // 表单对象
      formData: new FormData(),
      // 表单
      enterpriseForm: {
        rightData: []
      },
      // 规则列表
      regularList: [],
      // 企业校验
      enterpriseFormRules: {
        regular: [
          { required: true, message: '请选择规则!', trigger: 'change' }
        ],
        rightData: [
          { required: true, message: '请选择企业!', trigger: 'change' }
        ]
      },
      // 企业选择左侧表格头
      leftColumns: [
        {
          title: '序号',
          align: 'center',
          ellipsis: true,
          width: 80,
          customRender: (text, record, index) => {
            if (!record.disabled) {
              return index + 1
            }
          }
        },
        {
          title: '企业名称',
          align: 'center',
          ellipsis: true,
          dataIndex: 'name'
        },
        {
          title: '所在区(县)',
          align: 'center',
          ellipsis: true,
          dataIndex: 'area'
        },
        {
          title: '具体地址',
          align: 'center',
          ellipsis: true,
          dataIndex: 'businessAddress'
        }
      ],
      // 企业选择左侧表格数据
      leftData: [],
      // 企业选择左侧表格选中行
      leftSelectedRowKeys: [],
      // 企业选择左侧表格加载
      leftTableLoading: false,
      // 企业选择左侧表格分页
      leftPagination: {
        current: 1, // 当前页数
        pageSize: 10, // 每页显示数量
        showQuickJumper: true, // 跳转
        showSizeChanger: true, // 显示改变每页数量
        total: 0, // 总数
        pageSizeOptions: ['10', '15', '20', '25'],
        showTotal: () => `共 ${this.leftData.length} 条`// 显示总数
      },
      // 企业选择右侧表格头
      rightColumns: [
        {
          title: '序号',
          align: 'center',
          ellipsis: true,
          width: 80,
          customRender: (text, record, index) => {
            if (!record.disabled) {
              return index + 1
            }
          }
        },
        {
          title: '企业名称',
          align: 'center',
          ellipsis: true,
          dataIndex: 'name'
        },
        {
          title: '所在区(县)',
          align: 'center',
          ellipsis: true,
          dataIndex: 'area'
        },
        {
          title: '具体地址',
          align: 'center',
          ellipsis: true,
          dataIndex: 'businessAddress'
        }
      ],
      // 企业选择右侧表格数据
      rightData: [],
      // 企业选择右侧表格选中行
      rightSelectedRowKeys: [],
      // 企业选择右侧表格加载
      rightTableLoading: false,
      // 企业选择右侧表格分页
      rightPagination: {
        current: 1, // 当前页数
        pageSize: 10, // 每页显示数量
        showQuickJumper: true, // 跳转
        showSizeChanger: true, // 显示改变每页数量
        total: 0, // 总数
        pageSizeOptions: ['10', '15', '20', '25'],
        showTotal: () => `共 ${this.leftData.length} 条`// 显示总数
      },
      // 源数据
      sourceData: [],
      // 目标数据
      targetData: []
    }
  },
  computed: {
    // 左侧是否有选中项
    leftIsSelecte () {
      return this.leftSelectedRowKeys.length > 0
    },
    // 右侧是否有选中项
    rightIsSelecte () {
      return this.rightSelectedRowKeys.length > 0
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 初始化
    async init () {
      // 获取数据字典
      this.dataDictionary = await this.getDataDictionary()
      // 写入应急类型
      this.emergencyTypeList = this.dataDictionary['W-067']
      // 写入响应类型
      this.responseTypeList = this.dataDictionary['W-068']
      // 获取规则列表
      this.getRegularList()
      if (this.$route.params.mode === 'edit') {
        // 携带参数跳转(编辑)
        this.getSchemeShow(this.$route.params.id)
      } else {
        // 直接跳转
        this.pageReady = true
      }
    },
    // 获取数据字典
    getDataDictionary () {
      return new Promise((resolve, reject) => {
        getDictData('W-067,W-068').then(res => {
          resolve(res.data)
        }).catch(error => {
          reject(error)
          console.log(error)
        })
      })
    },
    // 获取方案详细信息
    getSchemeShow (id) {
      getHnPlanById({
        id: id
      }).then(res => {
        if (res.code === '0') {
          this.selectSchemeForm = {
            name: res.data.name,
            emergencyType: res.data.contingencyType,
            fromTo: [this.$moment(res.data.startTime, 'YYYY-MM-DD'), this.$moment(res.data.endTime, 'YYYY-MM-DD')],
            responseType: res.data.responseType,
            responseTime: [this.$moment(res.data.responseStartTime, 'YYYY-MM-DD HH:mm'), this.$moment(res.data.responseEndTime, 'YYYY-MM-DD HH:mm')],
            explain: res.data.remark,
            fileList: res.data.hnPlanFileList,
            id: res.data.id
          }
          this.defaultFileList = res.data.hnPlanFileList.map(el => {
            return {
              uid: el.id,
              name: el.fileName,
              status: 'done',
              response: '',
              url: el.fileIndex
            }
          })
          this.enterpriseForm = {
            regular: res.data.ruleId
          }
        }
        this.pageReady = true
      }).catch(error => {
        console.log(error)
        this.pageReady = true
      })
    },
    // 上传文件之前校验
    beforeUpload (file, fileList) {
      const reg = /\.(xlsx|xls|doc|docx|pdf|jpg|jpeg|png)(\?.*)?$/
      return new Promise((resolve, reject) => {
        if (reg.test(file.name)) {
          if (file.size / 1024 / 1024 <= 20) {
            if (this.fileList.some(el => {
              return el.name === file.name
            })) {
              this.$message.error('方案附件重名!')
            } else {
              resolve()
            }
          } else {
            this.$message.error('方案附件大小不能超过20M!')
          }
        } else {
          this.$message.error('请上传正确的文件格式!')
          reject(new Error('请上传正确的文件格式!'))
        }
      })
    },
    // 上传文件状态变化
    uploadChange (info) {
      let fileList = [...info.fileList]
      // 限制上传文件个数，旧文件将会被新文件替换
      fileList = fileList.slice(-3)
      this.fileList = fileList
    },
    // 上传文件
    customRequest (data) {
      this.nextDisabled = true
      const formData = new FormData()
      formData.append('file', data.file)
      formData.append('remark', data.file.name)
      const progress = { percent: 1 }
      const intervalId = setInterval(() => {
        if (progress.percent < 80) {
          progress.percent++
          data.onProgress(progress)
        } else {
          clearInterval(intervalId)
        }
      }, 50)
      fileUpload({
        formData: formData,
        config: {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          baseURL: ''
        }
      }).then(res => {
        clearInterval(intervalId)
        progress.percent = 100
        data.onProgress(progress)
        const timer = setTimeout(() => {
          data.onSuccess()
          clearTimeout(timer)
          this.nextDisabled = false
        }, 500)
        if (res.code === 200) {
          this.selectSchemeForm.fileList.push({
            uid: res.data.fileName,
            name: res.data.fileName,
            status: 'done',
            response: '',
            url: res.data.ossFileUrlBoot,
            fileName: res.data.fileName,
            ossFileUrlBoot: res.data.ossFileUrlBoot,
            remark: res.data.remark
          })
          this.fileList[this.fileList.length - 1].url = res.data.ossFileUrlBoot
        } else {
          this.$message.error(res.message)
        }
      }).catch(error => {
        console.log(error)
        clearInterval(intervalId)
        data.onError()
        this.nextDisabled = false
      })
    },
    // 规则变化
    regularChange (value) {
      this.getEnterpriseList(value)
    },
    // 左侧表格选中行
    leftSelectedRowChange (selectedRowKeys) {
      this.leftSelectedRowKeys = selectedRowKeys
    },
    // 右侧表格选中行
    rightSelectedRowChange (selectedRowKeys) {
      this.rightSelectedRowKeys = selectedRowKeys
    },
    // 表格是否可以选中行
    isDisabled: record => ({
      props: {
        disabled: record.disabled === true
      }
    }),
    // 左侧表格变动
    leftTableChange (pagination, filters, sorter) {
      this.leftPagination = pagination
      // 查询接口
    },
    // 右侧表格变动
    rightTableChange (pagination, filters, sorter) {
      this.rightPagination = pagination
      // 查询接口
    },
    // 补齐表格(分页,真实数据)
    supplementRow (pagination, data) {
      const temp = []
      if (pagination.pageSize - data.length > 0) {
        for (let i = 0, l = pagination.pageSize - data.length; i < l; i++) {
          temp.push({
            id: 'p0w023kf' + i,
            disabled: true
          })
        }
      }
      return data.concat(temp)
    },
    // 获取企业列表
    getEnterpriseList (ruleId = '') {
      this.leftTableLoading = true
      getEntinfoList({
        pageNum: this.leftPagination.current,
        pageSize: this.leftPagination.pageSize,
        param: {
          contingencyType: this.selectSchemeForm.emergencyType,
          ruleId: ruleId
        }
      }).then(res => {
        if (res.code === '0') {
          this.leftData = res.data.list
          this.sourceData = this.supplementRow(this.leftPagination, this.leftData)
        }
        this.leftTableLoading = false
      }).catch(error => {
        console.log(error)
        this.leftTableLoading = false
      })
    },
    // 获取企业选中列表
    getChooseEnterpriseList () {
      getChooseEntinfoList({
        pageNum: this.rightPagination.current,
        pageSize: this.rightPagination.pageSize,
        param: {
          contingencyType: this.selectSchemeForm.emergencyType,
          id: this.selectSchemeForm.id
        }
      }).then(res => {
        if (res.code === '0') {
          this.rightData = res.data.list
          this.enterpriseForm.rightData = this.rightData
          this.targetData = this.supplementRow(this.rightPagination, this.rightData)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取规则列表
    getRegularList () {
      queryHnRuleList({
        type: '2'
      }).then(res => {
        if (res.code === '0') {
          this.regularList = res.data
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 转移到目标
    toTarget () {
      const source = []
      const arr = this.leftData.filter((el, index) => {
        let isTrue = false
        this.leftSelectedRowKeys.forEach(item => {
          if (item === el.id) {
            isTrue = true
          }
        })
        if (!isTrue) {
          source.push(el)
        }
        return isTrue
      })
      this.leftData = [].concat(source)
      this.rightData = Object.assign(this.rightData, arr)
      this.enterpriseForm.rightData = this.rightData
      this.targetData = this.supplementRow(this.rightPagination, this.rightData)
      this.leftSelectedRowKeys = []
      // 校验所选企业
      this.$refs.enterpriseForm.validate(valid => {
        if (valid) {
        }
      })
    },
    // 转移到源数据
    toSource () {
      const target = []
      const arr = this.rightData.filter((el, index) => {
        let isTrue = false
        this.rightSelectedRowKeys.forEach(item => {
          if (item === el.id) {
            isTrue = true
          }
        })
        if (!isTrue) {
          target.push(el)
        }
        return isTrue
      })
      this.rightData = [].concat(target)
      this.leftData = this.leftData.concat(arr)
      this.enterpriseForm.rightData = this.rightData
      this.targetData = this.supplementRow(this.rightPagination, this.rightData)
      this.rightSelectedRowKeys = []
      // 校验所选企业
      this.$refs.enterpriseForm.validate(valid => {
        if (valid) {
        }
      })
    },
    // 上一步
    prev () {
      this.current--
    },
    // 下一步
    next () {
      switch (this.current) {
        case 0:
          // 校验选择方案
          this.$refs.selectSchemeForm.validate(valid => {
            if (valid) {
              this.current++
              // 不是自定义规则直接查询企业
              if (this.selectSchemeForm.emergencyType !== '4') {
                // 获取企业列表
                this.getEnterpriseList()
                this.getChooseEnterpriseList()
              } else if (this.$route.params.mode === 'edit') {
                this.getEnterpriseList(this.enterpriseForm.regular)
                this.getChooseEnterpriseList()
              }
            }
          })
          break
        case 1:
          // 校验企业选择
          this.$refs.enterpriseForm.validate(valid => {
            if (valid) {
              this.current++
            }
          })
          break
        case 2:
          if (this.$route.params.mode === 'edit') {
            this.edit()
          } else {
            this.launch()
          }
          break
      }
    },
    // 启动
    launch () {
      let ruleName = ''
      this.regularList.forEach(el => {
        if (el.id === this.enterpriseForm.regular) {
          ruleName = el.name
        }
      })
      const param = {
        name: this.selectSchemeForm.name,
        contingencyType: this.selectSchemeForm.emergencyType,
        startTime: this.$moment(this.selectSchemeForm.fromTo[0]).format('YYYY-MM-DD'),
        endTime: this.$moment(this.selectSchemeForm.fromTo[1]).format('YYYY-MM-DD'),
        responseType: this.selectSchemeForm.responseType,
        responseStartTime: this.$moment(this.selectSchemeForm.responseTime[0]).format('YYYY-MM-DD HH:mm'),
        responseEndTime: this.$moment(this.selectSchemeForm.responseTime[1]).format('YYYY-MM-DD HH:mm'),
        remark: this.selectSchemeForm.explain,
        hnPlanFileList: this.selectSchemeForm.fileList.map(el => {
          return {
            fileIndex: el.ossFileUrlBoot,
            fileName: el.fileName
          }
        }),
        ruleId: this.enterpriseForm.regular ? this.enterpriseForm.regular : '',
        ruleName: ruleName,
        hnPlanEntinfoList: this.rightData.map(el => {
          return {
            entinfoId: el.id,
            entinfoName: el.name
          }
        })
      }
      this.$confirm({
        title: '你确定要启动方案?',
        okText: '是',
        okType: 'danger',
        cancelText: '否',
        onOk: async () => {
          insertSelective(param).then(res => {
            if (res.code === '0') {
              this.$message.success('启动成功!')
              this.selectSchemeForm = {
                fileList: []
              }
              this.fileList = []
              this.defaultFileList = []
              this.leftData = []
              this.rightData = []
              this.regularList = []
              this.sourceData = []
              this.targetData = []
              this.current = 0
            } else {
              this.$message.error(res.message)
            }
          }).catch(error => {
            console.log(error)
            this.$message.error('启动失败!')
          })
        }
      })
    },
    // 编辑方案
    edit () {
      console.log(this.enterpriseForm)
      let ruleName = ''
      this.regularList.forEach(el => {
        if (el.id === this.enterpriseForm.regular) {
          ruleName = el.name
        }
      })
      const param = {
        id: this.selectSchemeForm.id,
        name: this.selectSchemeForm.name,
        contingencyType: this.selectSchemeForm.emergencyType,
        startTime: this.$moment(this.selectSchemeForm.fromTo[0]).format('YYYY-MM-DD'),
        endTime: this.$moment(this.selectSchemeForm.fromTo[1]).format('YYYY-MM-DD'),
        responseType: this.selectSchemeForm.responseType,
        responseStartTime: this.$moment(this.selectSchemeForm.responseTime[0]).format('YYYY-MM-DD HH:mm'),
        responseEndTime: this.$moment(this.selectSchemeForm.responseTime[1]).format('YYYY-MM-DD HH:mm'),
        remark: this.selectSchemeForm.explain,
        hnPlanFileList: this.selectSchemeForm.fileList.map(el => {
          return {
            fileIndex: el.ossFileUrlBoot,
            fileName: el.fileName
          }
        }),
        ruleId: this.enterpriseForm.regular ? this.enterpriseForm.regular : '',
        ruleName: ruleName,
        hnPlanEntinfoList: this.rightData.map(el => {
          return {
            entinfoId: el.id,
            entinfoName: el.name
          }
        })
      }
      this.$confirm({
        title: '你确定要启动方案?',
        okText: '是',
        okType: 'danger',
        cancelText: '否',
        onOk: async () => {
          updateByPrimaryKeySelective(param).then(res => {
            if (res.code === '0') {
              this.$message.success('启动成功!')
              this.selectSchemeForm = {
                fileList: []
              }
              this.fileList = []
              this.defaultFileList = []
              this.leftData = []
              this.rightData = []
              this.regularList = []
              this.sourceData = []
              this.targetData = []
              this.current = 0
              this.$router.push({ name: 'schemeManagement' })
            } else {
              this.$message.error(res.message)
            }
          }).catch(error => {
            console.log(error)
            this.$message.error('启动失败!')
          })
        }
      })
    },
    // 文件删除
    remove () {
      return false
    }
  }
}
</script>
<style lang="scss">
.scheme-start-step-container {
  width: 70%;
  margin: 0 auto;
  height: 80px;
  padding-top: 10px;
}
.scheme-start-form {
  position: relative;
  padding-top: 20px;
  &::before {
    content: '';
    display: block;
    width: calc(100% + 40px);
    height: 20px;
    position: absolute;
    top: -20px;
    left: -20px;
    background-color: #f0f2f5;
  }
}
.scheme-start-upload {
  button {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  input[type='file'] {
    display: none;
  }
}
.scheme-start-step {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  .ant-btn {
    margin-left: 10px;
    &:nth-of-type(1) {
      margin-left: 0;
    }
  }
}
.scheme-start-table-wrapper {
  display: flex;
}
.scheme-start-table-arrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  button {
    margin: 5px 20px;
  }
}
</style>
